import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtForm, AtButton } from 'taro-ui'
import { DNavBar, DAtInpute } from '@/components'
import './adduserbank.scss'

export default class Adduserbaknk extends Component {

    constructor(props) {
        super(props)
        this.state = {
            obj: {
                account: "",
                bank: "",
                name: "",
                telphone: ""
            }
        }
    }

    onHandleAccount(account) {
        this.setState({
            obj: {
                ...this.state.obj,
                account
            }
        })
    }

    onHandleBank(bank) {
        this.setState({
            obj: {
                ...this.state.obj,
                bank
            }
        })
    }

    onHandleName(name) {
        this.setState({
            obj: {
                ...this.state.obj,
                name
            }
        })
    }

    onHandleTelphone(telphone) {
        this.setState({
            obj: {
                ...this.state.obj,
                telphone
            }
        })
    }

    onSubmit() {
        let {
            obj
        } = this.state
        Taro.navigateBack({
            delta: 1
        })
    }

    render() {
        const {
            obj
        } = this.state
        return (
            <View className='b_adduserbank'>
                <DNavBar title={'添加银行卡'}></DNavBar>
                <View className='b_adduserbank__content'>
                    <View className='b_adduserbank__form'>
                        <AtForm>
                            <DAtInpute value={obj.account} onChange={this.onHandleAccount.bind(this)} title='银行卡号' type="number" placeholder='请输入银行卡号'></DAtInpute>
                            <DAtInpute value={obj.bank} onChange={this.onHandleBank.bind(this)} title='开户银行' placeholder='请输入开户银行'></DAtInpute>
                            <DAtInpute value={obj.name} onChange={this.onHandleName.bind(this)} title='持有人姓名' placeholder='请输入持有人姓名'></DAtInpute>
                            <DAtInpute value={obj.telphone} onChange={this.onHandleTelphone.bind(this)} title='联系方式' type='phone' placeholder='请输入联系方式'></DAtInpute>
                        </AtForm>
                    </View>
                </View>
                <AtButton className='item_btn b_adduserbank__btn' onClick={this.onSubmit.bind(this)}>完成</AtButton>
            </View>
        )
    }
}